<!DOCTYPE html>
<html>
    <head>
        <title>draggable</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css">
        <script src="../highlight/shCore.js">

        </script>
        <script src="../avalon.js">

        </script>
        <script>
            require(["draggable/avalon.draggable"], function() {
                avalon.define("test", function(vm) {
                    vm.draggable = {
                        beforeStartFn: function(e, data) {
                            avalon.log(e.type + " beforeStart")
                            data.$element.addClass("active")
                        },
                        startFn: function(e) {
                            avalon.log(e.type + " start")
                        },
                        dragFn: function(e, data) {
                            this.innerHTML = data.pageX + " " + data.pageY
                            avalon.log(e.type + " drag")
                        },
                        beforeStopFn: function(e, data) {
                            avalon.log(e.type + " beforeStop")
                            data.$element.removeClass("active")
                        },
                        stopFn: function(e) {
                            avalon.log(e.type + " stop")
                            this.innerHTML = ""
                        }
                    }
                    vm.$skipArray = ["draggable"]
                })
                avalon.scan()
            })

        </script>
        <style>
            #aaa{
                width:100px;
                height: 100px;
                line-height:100px;
                position: absolute;
                background: red;
                z-index: 10;
                text-align: center;
            }
            .active{
                border:2px solid yellow;
            }

        </style>
    </head>
    <body>
        <div id="aaa"
             data-draggable-before-start="beforeStartFn"
             data-draggable-start="startFn"
             data-draggable-drag="dragFn"
             data-draggable-before-stop="beforeStopFn"
             data-draggable-stop="stopFn"
             ms-draggable 
             ms-controller="test" 
             >

        </div>

        <h1>各种回调 </h1>
        <pre class="brush:html;gutter:false;toolbar:false;">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;draggable&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;script src="../highlight/shCore.js"&gt;

        &lt;/script&gt;
        &lt;script src="../avalon.js"&gt;

        &lt;/script&gt;
        &lt;script&gt;
            require(["draggable/avalon.draggable"], function() {
                avalon.define("test", function(vm) {
                    vm.draggable = {
                        beforeStartFn: function(e, data) {
                            avalon.log(e.type + " beforeStart")
                            data.$element.addClass("active")
                        },
                        startFn: function(e) {
                            avalon.log(e.type + " start")
                        },
                        dragFn: function(e, data) {
                            this.innerHTML = data.pageX + " " + data.pageY
                            avalon.log(e.type + " drag")
                        },
                        beforeStopFn: function(e, data) {
                            avalon.log(e.type + " beforeStop")
                            data.$element.removeClass("active")
                        },
                        stopFn: function(e) {
                            avalon.log(e.type + " stop")
                            this.innerHTML = ""
                        }
                    }
                    vm.$skipArray = ["draggable"]
                })
                avalon.scan()
            })

        &lt;/script&gt;
        &lt;style&gt;
            #aaa{
                width:100px;
                height: 100px;
                line-height:100px;
                position: absolute;
                background: red;
                z-index: 10;
                text-align: center;
            }
            .active{
                border:2px solid yellow;
            }

        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="aaa"
             data-draggable-before-start="beforeStartFn"
             data-draggable-start="startFn"
             data-draggable-drag="dragFn"
             data-draggable-before-stop="beforeStopFn"
             data-draggable-stop="stopFn"
             ms-draggable 
             ms-controller="test" 
             &gt;

        &lt;/div&gt;

        &lt;h1&gt;各种回调 &lt;/h1&gt;

    &lt;/body&gt;
&lt;/html&gt;

        </pre>
    </body>
</html>
